<template>
	<view class="brand-product-page">
		<TopBar
			left-icon="/static/user.png"
			scan-icon="/static/saoyisao.png"
			menu-icon="/static/menu.png"
			@menu="toggleMenu"
		/>

		<scroll-view scroll-y class="form-scroll">
			<!-- 返回箭头 -->
			<view class="back-row" @click="goBack">
				<image class="back-arrow-icon" src="/static/left.png" mode="aspectFit" />
			</view>

			<!-- 标题 -->
			<text class="page-title">46DC85241</text>

			<!-- 上卡片 -->
			<view class="card top-card">
				<!-- 上部分：标题和副标题 -->
				<view class="top-section">
					<text class="main-title">Product Overview – Summary</text>
					<text class="subtitle">Scan to get its digital passeport</text>
				</view>

				<!-- 下部分：左右结构 -->
				<view class="bottom-section">
					<!-- 左边部分 -->
					<view class="left-part">
						<image src="/static/record/blue.png" class="product-img" mode="aspectFit" />
						<view class="product-info">
							<text class="uuid"><text class="bold-text">UUID:</text> 550e8400-...-440000</text>
							<text class="id-item"><text class="bold-text">ID:</text> Vaglette T-Shirt(green)</text>
							<text class="info-item-indent"><text class="bold-text">Weight:</text> 100g</text>
							<text class="info-item-indent"><text class="bold-text">Material:</text> 100% coton</text>
							<text class="info-item-indent"><text class="bold-text">Made in:</text> Portugal</text>
							<text class="info-item-indent"><text class="bold-text">Durability:</text> 50 wash cycles</text>
							<text class="info-item-indent"><text class="bold-text">Warranty:</text> 1 year</text>
							<text class="info-item-indent"><text class="bold-text">Recycling:</text> recyclable</text>
					</view>
					<view class="icons">
							<image src="/static/record/yifu.png" class="icon" />
							<image src="/static/record/iso.png" class="icon" />
							<image src="/static/record/stand.png" class="icon stand" />
						</view>
						<button class="export-btn" @click="toggleMiddle">Export rapport</button>
					</view>

					<!-- 右边部分 -->
					<view class="right-part">
						<text class="env-title">Environmental Cost</text>
						<view class="images-container">
							<image src="/static/record/360.png" class="env-img" mode="aspectFit" />
							<image src="/static/record/ABCDE.png" class="grade-img" mode="aspectFit" />
                </view>
						
						<view class="spacing"></view>
						<text class="section-title-single bold">Product Environmental</text>
						<text class="section-title-single">Footprint (PEF)</text>
						
						<view class="spacing-small"></view>
						<text class="category-title">Climate & Resources</text>
						<text class="text-content indent">C02 eq: 8 kg</text>
						<text class="text-content indent">Water use: 20 L</text>
						<text class="text-content indent">Land use: 0.3 m²·a</text>
						<text class="text-content indent">Energy use: 0.5 MJ</text>
						
						<view class="spacing"></view>
						<text class="category-title">Human Health</text>
						<text class="item-indent">Human toxicity: Low</text>
						<text class="item-indent">PM₂.₅: Low</text>
						
						<view class="spacing"></view>
						<text class="category-title">Ecosystems</text>
						<text class="item-indent">Acidification: Low</text>
						<text class="item-indent">Eutrophication: Low</text>
						<text class="item-indent">Ecotoxicity: Very Low</text>
						
						<view class="spacing"></view>
						<view class="icons">
							<image src="/static/login/1.png" class="icon" />
							<image src="/static/login/2.png" class="icon" />
							<image src="/static/login/4.png" class="icon" />
							<image src="/static/login/5.png" class="icon" />
                    </view>
                </view>
            </view>
			</view>

			<!-- 中卡片：可折叠隐藏（由原来的中卡片和下卡片组合） -->
			<view class="card middle-card" :class="{ collapsed: hiddenMiddle }" @click="toggleMiddle">
				<view class="middle-content">
					<view class="left-text">
						<!-- 可折叠部分 -->
						<view class="collapsible-left" :class="{ hidden: hiddenMiddle }">
							<text class="text-content bold">Factory Stage – Production</text>
							<text class="text-content">UUID: 550e8400-...-440000</text>
							<text class="text-content">Process: Garment Making</text>
							<text class="text-content process-aligned">Dyeing & Finishing</text>
							<text class="text-content">Location: Portugal</text>
							<text class="text-content bold">Environmental Cost</text>
							<!-- 300图片也折叠进去 -->
							<image src="/static/record/300.png" class="bottom-img" mode="aspectFit" />
						</view>
						
						<!-- 始终显示部分 - ABCD图片 -->
						<image src="/static/record/ABCDE.png" class="bottom-img" mode="aspectFit" />
					</view>
					<view class="right-text">
						<!-- 可折叠部分 -->
						<view class="collapsible-right" :class="{ hidden: hiddenMiddle }">
							<text class="text-content bold">Climate & Resources</text>
							<text class="text-content indent">C02 eq: 6 kg</text>
							<text class="text-content indent">Water use: 15 L</text>
							<text class="text-content indent">Land use: 0.3 m²·a</text>
							<text class="text-content indent">Energy use: 0.3 MJ</text>
							<view class="spacing"></view>
							<text class="text-content bold">Human Health</text>
							<text class="text-content indent">Human toxicity: Low</text>
							<text class="text-content indent">PM₂.₅(fine dust): Low</text>
							<text class="center-text bold">Ecosystems</text>
							<text class="center-text indent">Acidification: Low</text>
						</view>
						
						<!-- 始终显示部分 - Eutrophication和Ecotoxicity -->
						<view class="right-text-bottom">
							<text class="center-text indent">Eutrophication: Low</text>
						</view>
						<view class="right-text-bottom">
							<text class="center-text indent">Ecotoxicity: Very Low</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 下卡片（点击展开收缩中卡片） -->
			<view class="card bottom-card" @click="toggleMiddle">
				<view class="middle-content">
					<view class="left-text">
						<text class="text-content bold">Store Stage – Distribution</text>
						<text class="text-content">UUID: 550e8400-...-440000</text>
						<text class="text-content">Process: Garment Making</text>
						<text class="text-content process-aligned">Dyeing & Finishing</text>
						<text class="text-content">Location: Portugal</text>
						<text class="text-content bold">Environmental Cost</text>
						
						<!-- 左侧图片 -->
						<view class="left-images">
							<image src="/static/record/60.png" class="bottom-img" mode="aspectFit" />
							<image src="/static/record/ABCDE.png" class="bottom-img" mode="aspectFit" />
						</view>
					</view>
					<view class="right-text">
						<text class="text-content bold">Climate & Resources</text>
						<text class="text-content indent">C02 eq: 2 kg</text>
						<text class="text-content indent">Water use: 5 L</text>
						<text class="text-content indent">Land use: 0 m²·a</text>
						<text class="text-content indent">Energy use: 0.2 MJ</text>
						<view class="spacing"></view>
						<text class="text-content bold">Human Health</text>
						<text class="text-content indent">Human toxicity: Low</text>
						<text class="text-content indent">PM₂.₅(fine dust): Low</text>
						<text class="center-text bold">Ecosystems</text>
						<text class="center-text indent">Acidification: Low</text>
						<text class="center-text indent">Eutrophication: Low</text>
						<text class="center-text indent">Ecotoxicity: Very Low</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<CustomTabbar :active="isBrand ? 'record' : 'import'" />

		<AccountMenu
			v-if="showMenu"
			:style="{ '--anchor-top': '70px', '--anchor-right': '16px' }"
			@close="closeMenu"
			@select="closeMenu"
		/>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store/user.js'
import TopBar from '@/components/TopBar.vue';
import AccountMenu from '@/components/AccountMenu.vue';
import CustomTabbar from '@/components/CustomTabbar.vue';

const userStore = useUserStore()
const { userType } = storeToRefs(userStore)
const isBrand = computed(() => typeof userType.value === 'string' && /brand/i.test(userType.value))

const showMenu = ref(false);
const toggleMenu = () => { showMenu.value = !showMenu.value; };
const closeMenu = () => { showMenu.value = false; };
const goBack = () => {
	uni.navigateTo({ url: '/pages/brand/brand-type' });
};

const hiddenMiddle = ref(false);
const toggleMiddle = () => { hiddenMiddle.value = !hiddenMiddle.value; };
</script>

<style lang="scss">
.brand-product-page { min-height: 100vh; background: linear-gradient(to bottom, #BFE7FF 0%, #EBFFE8 86%, #FFFFFF 100%); }
.form-scroll { margin-top: 120rpx; padding: 0 32rpx 168rpx 32rpx; box-sizing: border-box; }
.back-row { margin: 24rpx 0 0 -16rpx; width: 88rpx; height: 88rpx; display: flex; align-items: center; justify-content: center; }
.back-arrow-icon { width: 48rpx; height: 48rpx; }
.page-title { margin: 0 0 16rpx 0; font-size: 44rpx; font-weight: 800; color: #0b1e2a; }

.card { background: #fff; border-radius: 24rpx; box-shadow: 0 8rpx 24rpx rgba(0,0,0,.12); padding: 32rpx; margin-bottom: 0; }
.top-card { box-shadow: none; border-radius: 24rpx 24rpx 0 0; padding-bottom: 16rpx; }
.middle-card { box-shadow: none; margin-top: 0; padding-top: 16rpx; padding-bottom: 16rpx; }
.bottom-card { margin-top: 0; padding-top: 16rpx; }

/* 上卡片样式 */
.top-card { position: relative; z-index: 3; }
.top-section { margin-bottom: 32rpx; text-align: center; }
.main-title { font-size: 32rpx; font-weight: 600; color: #0b1e2a; display: block; margin-bottom: 8rpx; }
.subtitle { font-size: 28rpx; color: #666; display: block; }
.bottom-section { display: flex; gap: 16rpx; }

/* 左边部分 */
.left-part { flex: 1; display: flex; flex-direction: column; align-items: center; width: 50%; padding-right: 16rpx; }
.product-img { width: 250rpx; height: 250rpx; border-radius: 8rpx; margin-bottom: 12rpx; }
.product-info { width: 100%; display: flex; flex-direction: column; margin-bottom: 20rpx; }
.uuid { font-size: 20rpx; color: #0b1e2a; margin-bottom: 60rpx; }
.id-item { font-size: 20rpx; color: #0b1e2a; margin-left: 8rpx; margin-bottom: 16rpx; white-space: nowrap; }
.info-item-indent { font-size: 20rpx; color: #0b1e2a; margin-left: 8rpx; margin-bottom: 16rpx; }
.bold-text { font-weight: 800; }
.icons { display: flex; gap: 12rpx; margin: 24rpx 0; }
.icon { width: 60rpx; height: 60rpx; }
.icon.stand { width: 100rpx; height: 60rpx; }
.export-btn { background: #222; color: #fff; border-radius: 10rpx; height: 50rpx; padding: 0 20rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; }

/* 右边部分 */
.right-part { flex: 1; display: flex; flex-direction: column; width: 50%; }
.env-title { font-size: 24rpx; font-weight: 400; color: #0b1e2a; margin-bottom: 12rpx; white-space: nowrap; }
.images-container { display: flex; flex-direction: column; align-items: center; gap: 0; margin-bottom: 6rpx; }
.env-img { width: 206rpx; height: 112rpx; border-radius: 8rpx; }
.grade-img { width: 180rpx; height: 90rpx; }
.spacing { height: 4rpx; }
.spacing-small { height: 2rpx; }
.section-title { font-size: 24rpx; font-weight: 400; color: #0b1e2a; margin-bottom: 4rpx; display: flex; flex-direction: column; }
.title-line { font-size: 24rpx; font-weight: 400; color: #0b1e2a; margin-bottom: 1rpx; }
.section-title-single { font-size: 20rpx; font-weight: 400; color: #0b1e2a; margin-bottom: 18rpx; display: block; }
.section-title-single.bold { font-weight: 800; }
.category-title { font-size: 22rpx; font-weight: 600; color: #0b1e2a; margin-bottom: 2rpx; }
.item-indent { font-size: 20rpx; color: #0b1e2a; margin-bottom: 1rpx; margin-left: 8rpx; }

/* 中卡片样式 */
.middle-card { transition: all .25s ease; position: relative; z-index: 1; border-radius: 0; }
.middle-card.collapsed { margin-top: -320rpx; }
.middle-content { display: flex; gap: 20rpx; min-height: 400rpx; }
.left-text { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.right-text { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.middle-card .text-content { margin-top: 0; }

/* 可折叠部分样式 */
.collapsible-left, .collapsible-right { 
	transition: all .25s ease; 
	overflow: hidden; 
	display: flex;
	flex-direction: column;
}
.collapsible-left.hidden, .collapsible-right.hidden { 
	height: 0; 
	opacity: 0; 
	margin-bottom: 0; 
}


.text-content { font-size: 24rpx; color: #0b1e2a; margin-top: 16rpx; }
.text-content.bold { font-weight: 800; white-space: nowrap; }
.text-content.indent { margin-left: 12rpx; margin-bottom: 0; margin-top: 0; }
.text-content.process-indent { margin-left: 48rpx; }
.text-content.process-aligned { margin-left: 0; margin-bottom: 16rpx; padding-left: 3.075rem; white-space: nowrap; }

/* 下卡片样式 */
.bottom-card { position: relative; z-index: 0; transition: margin-top .25s ease; border-radius: 0 0 12rpx 12rpx; }
.bottom-card .middle-content { min-height: 400rpx; }
.bottom-card .text-content { margin-top: 4rpx; }

/* 左侧图片样式 */
.left-images { display: flex; flex-direction: column; align-items: flex-start; margin-top: 16rpx; }
.bottom-img { width: 200rpx; height: 100rpx; border-radius: 8rpx; margin-bottom: 8rpx; }

/* 右侧底部文字样式 */
.right-text-bottom { margin-top: 1rpx; }
.center-text { font-size: 24rpx; color: #0b1e2a; margin-bottom: 1rpx; }
.center-text.bold { font-weight: 800; }
.center-text.indent { margin-left: 16rpx; margin-top: 0; }
</style>
